<template>
	<div>
		<el-form label-width="150px" :model="form" ref="ruleForm" :rules="rules" :inline-message="true">
			<div class="container">
				<h3 class="margin_b_20">主图</h3>
				<el-form-item label=" " prop="imageValue" ref="validImg">
					<uni-file-picker ref="imageValue" v-model="form.imageValue" fileMediatype="image" limit="5" returnType="array" :image-styles="imageStyle" @success="imgUpload" @delete="imgDelete" @move="imgMove" />
				</el-form-item>
			</div>
			<div class=" container">
				<h3 class="margin_b_20">商品详情</h3>
				<el-form-item label=" " prop="editorContent" ref="editorContent">
					<use-editor ref="editor" @editorChange="editorChange"></use-editor>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				imageValue: [],
				editorContent: ''
			},
			imageStyle: {
				height: '150px',
				width: '150px'
			},
			rules: {
				imageValue: [{ type: 'array', required: true, message: '请上传主图', trigger: 'change' }],
				editorContent: [{ required: true, message: '请绘制商品详情', trigger: 'change' }]
			}
		};
	},
	methods: {
		submitData(callback) {
			if (this.form.editorContent == '<p><br></p>') {
				this.form.editorContent = '';
			}
			this.$refs.ruleForm.validate((valid, obj) => {
				this.$api.set_unvalidated_form_focus(this, obj);
				if (valid) {
					if (typeof callback === 'function') {
						callback(
							{
								content: this.form.editorContent,
								imgs: this.form.imageValue
							},
							valid,
							obj
						);
					}
				} else {
					if (typeof callback === 'function') {
						callback(
							{
								content: this.form.editorContent,
								imgs: this.form.imageValue
							},
							valid,
							obj
						);
					}
					return false;
				}
			});
		},
		getData(callback) {
			this.submitData(callback);
		},
		setData(data) {
			this.form.imageValue = data.imgs;

			if (data && data.desc_mobile) {
				this.form.editorContent = data.desc_mobile;
				this.$refs.editor.setContent(this.form.editorContent);
			}
		},
		editorChange(res) {
			this.form.editorContent = res;
			if (res == '') {
				this.$refs.ruleForm.validateField('editorContent');
			} else {
				this.$refs.editorContent.clearValidate();
			}
		},
		imgUpload() {
			this.$refs.validImg.clearValidate();
		},
		imgDelete(e) {
			this.form.imageValue.splice(this.form.imageValue.findIndex(x => x.url == e.tempFilePath), 1);
			if (this.form.imageValue.length <= 0) {
				this.$refs.ruleForm.validateField('imageValue');
			}
		},
		imgMove(e) {
			this.form.imageValue = e;
		}
	}
};
</script>

<style></style>
